$orange: #ee7419;
$midorange: #f0a54f;
$lightorange: #fcf0e5;
.calendar-input-container {
  display: inline-block;
  position: relative;
  padding: 1rem;
  text-align: center;
  font-family: SimHei;
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
  .calendar-input {
    box-sizing: border-box;
    width: 20rem;
    height: 3rem;
    padding: {
      left: .5rem;
      right: .5rem;
    }
    border: .1rem solid #ccc;
    border-radius: 4%;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    transition: all .6s;
  }
  #calendar {
    position: absolute;
    width: 20rem;
    height: 24rem;
    box-sizing: border-box;
    border: .2rem solid #eee;
    border-radius: 2%;
    background-color: #fff;
    div, span {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    div {
      height: 12.5%;
      width: 100%;
    }
    span {        
      height: 100%;
      width: 14.2857%;
    }
    #calendar-header {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      span {
        display: flex;
        align-items: center;
      }
      #date-box {
        flex-grow: 2;
      }
    }
    .week {
      box-sizing: border-box;
      padding: .5rem;
      font-size: 1.6rem;
      span {
        height: 100%;
      }
    }
    .days {
      box-sizing: border-box;
      height: 75%;
      padding: .5rem;
      font-size: 1.4rem;
      span {
        height: 16.666667%;
        cursor: pointer;
        transition: all .5s;
      }
      .unselect {
        cursor: default;
      }
    }
  }
}
.orange-theme {
  .focus {
    border-color: $midorange;
    box-shadow: 0 0 .5rem $midorange;
  }
  .arrow {
    cursor: pointer;
    color: $orange;
    transition: color .5s;
    &:hover {
      color: $lightorange;
    }
  }
  .weekend {
    color: $orange;
  }
  .days {
    span {
      &:hover {
        border-radius: .2rem;
        background-color: $midorange;
        color: #fff;       
      }
    }
    .unselect,
    .unselect:hover {
      border-radius: 0;
      background-color: #fff;
      color: #ccc;
    }
    .select,
    .select:hover {
      border-radius: .2rem;
      background-color: $orange;
      color: #fff;
    }
  }
}
